import React from 'react';
import { Breadcrumb, Icon, Modal, Button, Input, message } from 'antd';
import './welcome.less';
import $ from 'jquery';
import Config from './config';

const config = new Config();
const userInfo = JSON.parse(window.sessionStorage.getItem("UserInfo")); //获取用户登录之后的信息
const root = userInfo.root;
const token = sessionStorage.getItem('token');
// console.log(keyword.includes('managerupdatepwd'))
export default class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      visible1: false,
      originalPassword: '',
      newPassword: '',
      repeatPassword: '',
    }
    console.log(this)
  }
  modifyPassword() {
    this.setState({
      visible: true,
    });
  }
  modifyPasswordHandleOk(e) {
    // console.log(userInfo)
    const { originalPassword, newPassword, repeatPassword } = this.state;

    if (!originalPassword) {
      message.error(`请填写原始密码！`);
      return;
    }
    if (!newPassword) {
      message.error(`请填写新密码！`);
      return;
    }
    if (!repeatPassword) {
      message.error(`请填写重复新密码！`);
      return;
    }
    if (newPassword !== repeatPassword) {
      message.error(`两次密码不一致！`);
      return;
    }
    $.ajax({
      url: config.Priviliege + '/common/changePassword',
      type: "post",
      async: true,
      headers: { Authorization: 'Bearer ' + token },
      data: {
        // userid: userInfo.userid,
        password: this.state.originalPassword,
        newPassword: this.state.newPassword,
      },
      success: res => {
        // console.log('aaa', res)
        if (res.code === 200) {
          this.setState({
            visible: false,
            originalPassword: '',
            newPassword: '',
            repeatPassword: '',
          });
          message.success('修改密码成功！')
        } else {
          message.error(res.msg)
        }
      }
    });

  }
  modifyPasswordHandleCancel() {
    this.setState({
      visible: false,
      originalPassword: '',
      newPassword: '',
      repeatPassword: '',
    });
  }

  safeExit() {
    this.setState({
      visible1: true,
    });
  }
  safeExithandleOk() {
    sessionStorage.removeItem("UserInfo");
    sessionStorage.removeItem('token');
    sessionStorage.removeItem('taglist');
    location.href = './login.html';
    this.setState({
      visible1: false
    });
  }
  safeExithandleCancel() {
    this.setState({
      visible1: false
    });
  }

  //输入原始密码
  inputOriginalPassword(e) {
    this.setState({
      originalPassword: e.target.value,
    });
  }
  //输入新密码
  inputNewPassword(e) {
    this.setState({
      newPassword: e.target.value,
    });
  }
  //输入重复新密码
  inputRepeatPassword(e) {
    this.setState({
      repeatPassword: e.target.value,
    });
  }
  CurrentSystem() {
    let system = '';
    const ua = navigator.userAgent;
    // 检测平台
    const p = navigator.platform;
    if (p.includes('Win')) {
      system = 'Windows';
    } else if (p.includes('Mac')) {
      system = 'MacOS';
    } else if (p.includes('Xll') || p.includes('Linux')) {
      system = 'Linux';
    }
    // 检测Windows操作系统
    if (system == 'Windows') {
      console.log(navigator.userAgent);
      if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
        if (RegExp['$1'] == 'NT') {
          switch (RegExp['$2']) {
            case '5.0':
              system += ' 2000';
              break;
            case '5.1':
              system += ' XP';
              break;
            case '6.0':
              system += ' Vista';
              break;
            case '6.1':
              system += ' 7';
              break;
            case '6.2':
              system += ' 8';
              break;
            case '10':
              system += ' 10';
              break;
            default:
              system += 'NT';
              break;
          }
        } else if (RegExp['$1'] == '9x') {
          system += 'ME';
        } else {
          system += RegExp['$1'];
        }
      }
    }
    return system
  }

  render() {
    //console.log(userInfo);
    let system = this.CurrentSystem();
    return (
      <div id="hyhl">
        <div className="hyhl1">
          <h2>欢迎使用橘色新订单后台管理系统</h2>
          <div className="hyhl1-1 clearfix">
            <ul>
              <li>当前用户账号：{root ? '超级管理员' : userInfo.userName}</li>
              <li>操作系统：{system}</li>
              <li>域名IP：124.232.137.217</li>
              <li>当前官方版本：V2015001</li>
              <li>返回服务器处理请求的端口：80</li>
              <li>当前使用版本：V2015001</li>
              <li>信息服务软件/版本：Microsoft-IIs/7.5</li>
            </ul>
          </div>
          <div className="hyhl1-2">
            <p>客户端浏览要求：IE9.0或以上（推荐使用Chrome谷歌浏览器），并关闭所有弹窗的阻拦程序；</p>
            <p>服务器建议采用：Windows 2000 Server或Windows 2003 Server.</p>
          </div>
          <div className="hyhl1-3">
            <div className="hyhl1-3-2">
              <a style={{ width: 100, height: 30, lineHeight: '30px', textAlign: 'center', display: 'inline-block', background: '#4f6273', borderRadius: '5px', color: '#fff' }} type="primary" onClick={this.modifyPassword.bind(this)}>修改密码</a>
              <Modal
                visible={this.state.visible}
                title="修改密码"
                onOk={this.modifyPasswordHandleOk.bind(this)}
                onCancel={this.modifyPasswordHandleCancel.bind(this)}
                className='welcomeModal'
              >
                <p className="szma">原始密码<Input type="password" value={this.state.originalPassword} onChange={(e) => this.inputOriginalPassword(e)} placeholder="原始密码" /></p>
                <p className="szma">设置密码<Input type="password" value={this.state.newPassword} onChange={(e) => this.inputNewPassword(e)} placeholder="新密码" /></p>
                <p className="szma">重复密码<Input type="password" value={this.state.repeatPassword} onChange={(e) => this.inputRepeatPassword(e)} placeholder="重复新密码" /></p>
              </Modal>
            </div>
            <div className="hyhl1-3-1">
              <a style={{ width: 100, height: 30, lineHeight: '30px', textAlign: 'center', display: 'inline-block', background: '#4f6273', borderRadius: '5px', color: '#fff' }} type="primary" onClick={this.safeExit.bind(this)}>安全退出</a>
              <Modal
                visible={this.state.visible1}
                title="安全退出"
                onOk={this.safeExithandleOk.bind(this)}
                onCancel={this.safeExithandleCancel.bind(this)}
                className='welcomeModal'
              >
                <p>确定退出当前账户</p>
              </Modal>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
